@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <link href="/sitefiles/assets/css/buttons.css" rel="stylesheet" type="text/css" />
    <style>
        html {
            overflow-x: hidden !important;
        }
        body{
            margin:0;
            padding:0;
        }
        svg{
            touch-action:auto;
        }
    </style>
}
<div class="bg-gradient-mix-shade py-8 px-3 text-white text-center rounded-0">
    <div class="py-2"></div>
    <div class="pb-1"><span class="fs-6"><i class="bi bi-calendar-event me-2"></i>{{ dateStr }}</span></div>
</div>
<div class="p-3 animate__animated animate__zoomIn">
    <div class="mt-n8">
        <div class="bg-white p-2 rounded-pill d-flex justify-content-between align-items-center smooth-shadow-lg">
            <span class="d-flex justify-content-start align-items-center">
                <i class="bi bi-person-fill me-2 fs-1 ms-4"></i><span>欢迎：{{ user.displayName }}</span>
            </span>
            <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="img-fluid avatar-xl rounded-circle bg-light p-1">
        </div>
    </div>
</div>
<div class="p-3">
    <div class="card rounded-0 mb-3 shadow-lg" v-on:click="top.$vue.btnAppMenuClick('exam')">
        <div class="card-body text-center">
            <div class="mb-2">
              <i class="bi bi-journal-medical fs-4 me-2 text-warning"></i>
                累计考试<span class="text-primary fw-bold mx-2 fs-3">{{ examTotal }}</span>场
            </div>
            <div class="mt-3">
                <apexchart type="radialBar" :options="passChartOptions" :series="passSeries"></apexchart>
            </div>
        </div>
    </div>
    <div class="mb-3">
        <div class="row g-3">
            <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                <div class="card rounded-0 border-start-0 border-top-0 border-end-0 border-5 border-success card-hover-with-icon shadow-lg" v-on:click="btnExamMoniMoreMenuClick">
                    <div class="card-body d-flex align-items-center justify-content-between py-3">
                        <div>
                            <i class="bi bi-journals text-warning fs-3"></i>
                        </div>
                        <div class="text-end">
                            <div class="mb-2 fs-6">模拟<span class="text-primary fw-bold mx-2 fs-4">{{ examMoniTotal }}</span>场</div>
                            <div class="mb-0 fs-6">
                                及格率<span class="text-primary fw-bold mx-1 fs-4">{{ examMoniPercent }}</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-6">
                <div class="card rounded-0 border-start-0 border-end-0 border-top-0 border-5 border-success card-hover-with-icon shadow-lg" v-on:click="btnShuatiMoreMenuClick">
                    <div class="card-body d-flex align-items-center justify-content-between py-3">
                        <div>
                            <i class="bi bi-journal-check text-success fs-3"></i>
                        </div>
                        <div class="text-end">
                            <div class="mb-2 fs-6">刷题<span class="text-primary fw-bold mx-2 fs-4">{{ practiceAnswerTmTotal }}</span>道</div>
                            <div class="mb-0 fs-6">
                                正确率<span class="text-primary fw-bold mx-1 fs-4">{{ practiceAnswerPercent }}</span>%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最新考试安排</span>
            <el-link :underline="false" v-on:click="btnExamMoreMenuClick">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-if="examPaper" v-on:click="btnViewPaperClick(examPaper.id)">
        <div class="card-body">
            <div class="mb-3">
                {{ examPaper.title }}
            </div>
            <div class="row align-items-center g-3 mb-3 fs-6">
                <div class="col">
                    <div>
                        <div class="fw-light">
                            <div class="mb-1">总分：{{examPaper.totalScore}}<span class="me-1"></span>及格分：{{examPaper.passScore}}</div>
                            <div class="mb-1">
                                考试次数：
                                <span class="text-success fw-bold" v-if="(examPaper.userExamTimes-examPaper.myExamTimes)>0">
                                    {{examPaper.userExamTimes-examPaper.myExamTimes}}
                                </span>
                                <span class="fs-3 text-danger fw-bold" v-else>
                                    0
                                </span>
                                /{{examPaper.userExamTimes}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="bg-light p-2 rounded-circle">
                        <el-button type="primary" circle icon="el-icon-s-order" class="p-3"></el-button>
                    </div>
                </div>
            </div>
            <div><i class="bi bi-calendar2 me-2 text-warning"></i>{{ examPaper.examStartDateTimeStr }}</div>
        </div>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无安排</small>
            </div>
        </div>
    </div>
    <div class="card rounded-0 mt-5 shadow-lg bg-cover border border-dark border-5" style="background-image:url(/sitefiles/assets/images/pk/coverapp.jpg)" v-on:click="btnPkMoreMenuClick">
        <div class="card-body btn-paomadeng">
            <span class="btn-paomadeng-span"></span><span class="btn-paomadeng-span"></span><span class="btn-paomadeng-span"></span><span class="btn-paomadeng-span"></span>
            <div class="text-center py-5 text-light">
                <i class="bi bi-trophy-fill fs-2 text-warning"></i>
                <div class="mt-3">
                    <span class="text-light bg-dark px-3 py-2 fs-6 rounded-0">答题竞赛</span>
                </div>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>刷题练习</span>
            <el-link :underline="false" v-on:click="btnShuatiMoreMenuClick">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg">
        <div class="card-body">
            <div class="py-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <el-progress type="dashboard" :percentage="practiceCollectPercent" color="#5cb87a" :width="88" :stroke-width="8"></el-progress>
                    </div>
                    <div class="text-center">
                        <div class="mb-1 p-2 bg-light w-100 rounded-0">
                            <el-button type="success" class="py-3 w-100 rounded-0" v-on:click="btnCreatePracticeClick('Collect')"><i class="bi bi-person-hearts me-2"></i>收藏练习</el-button>
                        </div>
                        <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceCollectTmTotal }}</span>道题</div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <el-progress type="dashboard" :percentage="practiceWrongPercent" color="#5cb87a" :width="88" :stroke-width="8"></el-progress>
                    </div>
                    <div class="text-center">
                        <div class="mb-1 p-2 bg-light w-100 rounded-0">
                            <el-button type="danger" class="py-3 w-100 rounded-0" v-on:click="btnCreatePracticeClick('Wrong')"><i class="bi bi-backspace-reverse me-2"></i>错题练习</el-button>
                        </div>
                        <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceWrongTmTotal }}</span>道题</div>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <el-progress type="dashboard" :percentage="practiceAllPercent" color="#5cb87a" :width="88" :stroke-width="8"></el-progress>
                    </div>
                    <div class="text-center">
                        <div class="mb-1 p-2 bg-light w-100 rounded-0">
                            <el-button type="primary" class="py-3 w-100 rounded-0" v-on:click="btnCreatePracticeClick('All')"><i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始</el-button>
                        </div>
                        <div class="fw-light">共<span class="fw-bold mx-2">{{ practiceAllTmTotal }}</span>道题</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2 d-flex justify-content-between align-items-center">
            <span>最新模拟测试</span>
            <el-link :underline="false" v-on:click="btnExamMoniMoreMenuClick">更多<i class="el-icon-more ms-2"></i></el-link>
        </h5>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-if="examMoni" v-on:click="btnViewPaperClick(examMoni.id)">
        <div class="card-body">
            <div class="mb-3">
                {{ examMoni.title }}
            </div>
            <div class="row align-items-center g-3 fs-6">
                <div class="col">
                    <div>
                        <div class="fw-light">
                            <div class="mb-1">总分：{{examMoni.totalScore}}<span class="me-1"></span>及格分：{{examMoni.passScore}}</div>
                            <div class="mb-1">
                                考试次数：
                                <span class="text-success fw-bold" v-if="(examMoni.userExamTimes-examMoni.myExamTimes)>0">
                                    {{examMoni.userExamTimes-examMoni.myExamTimes}}
                                </span>
                                <span class="fs-3 text-danger fw-bold" v-else>
                                    0
                                </span>
                                /{{examMoni.userExamTimes}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="bg-light p-2 rounded-circle">
                        <el-button type="primary" circle icon="el-icon-s-order" class="p-3"></el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无安排</small>
            </div>
        </div>
    </div>
    <div class="p-3 pb-2 mt-4">
        <h5 class="border-start border-5 border-primary ps-2">
            <span>最近获得证书</span>
        </h5>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-if="topCer && topCer.id>0" v-on:click="btnViewCer(topCer)">
        <div class="card-body">
            <div class="card card-hover">
                <div class="row g-0">
                    <img :src="topCer.cerImg" class="w-100 rounded-0">
                </div>
            </div>
        </div>
    </div>
    <div class="card rounded-0 mb-3 shadow-lg" v-else>
        <div class="card-body">
            <div class="text-center p-5">
                <small><i class="bi bi-clipboard me-2"></i>暂无证书</small>
            </div>
        </div>
    </div>
    <div class="my-8 text-center">
        <small>没有了</small>
    </div>
</div>

<div class="py-8"></div>
@await Html.PartialAsync("_PartialAppMenu")
<div style="position:fixed;right:0;top:70%;" class="text-center" v-if="taskTotal>0">
    <button type="button" class="btn btn-dark rounded-start-pill" v-on:click="taskDialogVisible=true">
        <i class="el-icon-star-off text-warning"></i><span class="mx-2 text-light">{{ taskTotal }}</span>
    </button>
</div>
<template>
    <el-drawer :title="taskTotal+' 个待办'"
               size="50%"
               :visible.sync="taskDialogVisible"
               direction="btt">
        <div class="text-center p-2">
            <div class="card rounded-0">
                <div class="card-body">
                    <div class="mb-3" v-if="taskPaperTotal>0">
                        <div class="d-flex justify-content-between align-items-center" v-on:click="btnExamMoreMenuClick">
                            <span><i class="bi bi-star-half me-2 text-warning"></i>剩余<span class="text-danger mx-2">{{ taskPaperTotal }}</span>份试卷未参考</span>
                            <span><i class="el-icon-arrow-right"></i></span>
                        </div>
                    </div>
                    <div class="mb-3" v-if="taskQTotal>0">
                        <div class="d-flex justify-content-between align-items-center" v-on:click="btnAppMenuClick('wenjuan')">
                            <span><i class="bi bi-star-half me-2 text-warning"></i>剩余<span class="text-danger mx-2">{{ taskQTotal }}</span>份问卷未填写</span>
                            <span><i class="el-icon-arrow-right"></i></span>
                        </div>
                    </div>
                    <div class="mb-3" v-if="taskAssTotal>0">
                        <div class="d-flex justify-content-between align-items-center" v-on:click="btnAssMoreMenuClick">
                            <span><i class="bi bi-star-half me-2 text-warning"></i>剩余<span class="text-danger mx-2">{{ taskAssTotal }}</span>份测评未填写</span>
                            <span><i class="el-icon-arrow-right"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>
@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/app/dashboard.js" type="text/javascript"></script> }